<template>
  <view class="layout-page" @click="toWork">
    <view class="layout-img">
<!--      <up-lazy-load threshold="-450" border-radius="10" image="../../../static/logo.png" :index="index"></up-lazy-load> -->

      <image src="../../../static/logo.png" mode="heightFix"></image>
      <up-icon name="heart-fill" size="40rpx" color="#F7BA1E" class="icon-collect"></up-icon>
    </view>
    <view class="layout-title">睡觉的时候电视电话电话电话电话电话电话电话睡觉的时候电视电话电话电话电话电话电话电话</view>
    <view class="layout-label">
      <view class="label-price">
        <view class="price-currency">￥</view> 199
      </view>
      <view class="label-private">私密</view>
      <view class="label-square">广场</view>
    </view>
    <view class="layout-author">
      <view class="author-avatar">
        <image src="../../../static/logo.png" mode=""></image>
        <view class="author-name">awsedrftyuiouytgfrd</view>
      </view>
      <view class="author-browse">
        <up-icon name="eye-fill"></up-icon>
        12345
      </view>
    </view>
  </view>
</template>

<script setup>
  function toWork(){
    uni.navigateTo({
      url:'/subpages/userPage/product-work'
    })
  }
</script>

<style lang="less" scoped>
  .layout-page {
    width: 45vw;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 20rpx 16rpx 24rpx 16rpx;
    margin-top: 30rpx;
    .layout-img {
      width: 298rpx;
      height: 298rpx;
      position: relative;

      image {
        width: 298rpx;
        height: 298rpx;
      }

      .icon-collect {
        position: absolute;
        top: 12rpx;
        right: 6rpx;
      }
    }

    .layout-title {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 18rpx;
    }

    .layout-label {
      margin-top: 16rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .label-price {
        flex: 1;
        display: flex;
        align-items: flex-end;
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(255, 65, 108, 1);

        .price-currency {
          font-size: 24rpx;
          font-weight: 400;
        }
      }

      .label-private {
        width: 80rpx;
        height: 40rpx;
        border-radius: 20rpx;
        background: rgba(255, 239, 232, 1);
        font-size: 20rpx;
        font-weight: 400;
        color: rgba(255, 61, 36, 1);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .label-square {
        width: 80rpx;
        height: 40rpx;
        border-radius: 20rpx;
        background: rgba(242, 242, 242, 1);
        font-size: 20rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .layout-author {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;

      .author-avatar {
        border-radius: 32rpx;
        display: flex;

        image {
          width: 40rpx;
          height: 40rpx;
          border-radius: 32rpx;
        }

        .author-name {
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          margin-left: 12rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 140rpx;
        }
      }


      .author-browse {
        display: flex;
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);

      }
    }
  }
</style>